import router from '@/router'
import store from '@/store'
import axios from 'axios'
import { Message } from 'element-ui'
// 创建一个axios实例化对象
// localhost:9529/api基地址提前通过vue.config代理，提前解决跨域问题
const service = axios.create({
  // baseURL: '/api', // 和代理对应,但是写死地址，实际工作不同环境需要不同地址
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 10000 // 超时时间
})

// 请求拦截器
// interceptors截击机，拦截内容
// request发送的请求
// 对发送的token参数先一步拦截
// 请求拦截内涵两个参数，且都是回调函数，一个是成功的结果，一个是失败的结果
// 成功就正常返回，失败则返回一个错误的promise对象
service.interceptors.request.use((config) => {
  // return 返回结果之前先传入token验证
  // 获取本地存储的token,通过store.getters封装可以直接输出token，减少层级嵌套
  if (store.getters.token) {
    // 如果有token值，就传入到headers参数中
    // config指成功的结果,headers.Authorization设置接口文档中规定的格式
    config.headers.Authorization = `Bearer ${store.getters.token}`
  }
  return config // 必须要进行返回 必须放在最外层
}, (error) => {
  // 失败执行promise
  return Promise.reject(error)
})

// 响应拦截器,同样自带两个参数，都是回调函数
// response是响应拦截器，注意关键词不一致
service.interceptors.response.use((response) => {
  // 获取到有用的数据进行解构
  const { data, message, success } = response.data // 默认json格式  真正返回的数据
  if (success) {
    // 如果获取到的success布尔值为真，则返回有用的data数据
    return data
  }
  Message.error(message) // 组件库中导入错误信息弹窗,提示错误信息
  // 每个error中都会自带一个message信息
  // 提示完错误信息要终止运行→中止运行就要返回promise错误对象
  // 业务已经失败了
  return Promise.reject(new Error(message))
}, async(error) => {
  if (error.response.status === 401) {
    // 说明要么没传token 要么传的token超时了
    // 删除token
    await store.dispatch('user/logout') // 实现登出操作(已经封装好的logout函数)
    router.push('/login') // 登出后跳转到登录页重新登陆
    Message.error('用户登录信息超时') // 提示错误信息
  } else {
    Message.error(error.message) // 提示错误信息
  }
  return Promise.reject(error)
})

export default service
